<template>
  <div class="home-container">
    <div class="header">
      <van-nav-bar
        title="首页"
        right-text="个人中心"
        @click-right="Pages('/user')"
      >
      </van-nav-bar>
    </div>

    <div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item><img src="../assets/111.jpg" /></van-swipe-item>
        <van-swipe-item><img src="../assets/222.jpg" /></van-swipe-item>
        <van-swipe-item><img src="../assets/333.jpg" /></van-swipe-item>
        <van-swipe-item><img src="../assets/444.jpg" /></van-swipe-item>
      </van-swipe>
    </div>

    <div style="margin-top: 10px">
      <van-grid :gutter="10" :column-num="3" class="grid-icon">
        <van-grid-item
          text="花束"
          icon="flower-o"
          @click="Pages('/grid/classifylist')"
        ></van-grid-item>
        <van-grid-item
          text="礼盒"
          icon="point-gift-o"
          @click="Pages('/grid/gift')"
        ></van-grid-item>
        <van-grid-item
          text="蛋糕"
          icon="like-o"
          @click="Pages('/grid/cake')"
        ></van-grid-item>
        <van-grid-item
          text="花篮"
          icon="send-gift-o"
          @click="Pages('/grid/baskeflower')"
        ></van-grid-item>
        <van-grid-item
          text="绿植"
          icon="goods-collect-o"
          @click="Pages('/grid/greentree')"
        ></van-grid-item>
        <van-grid-item
          text="花语"
          icon="star-o"
          @click="Pages('/grid/lflower')"
        ></van-grid-item>
      </van-grid>
    </div>

    <div style="color: red; text-align: center; margin-top: 15px">今日热门</div>
    <div class="content img-list">
      <div
        v-for="(item, index) in indexList"
        :key="index"
        class="content-item"
        @click="pages(item)"
      >
        <img
          :src="item.picUrl"
          style="height: 140px; margin-top: 10px"
          alt=""
        />
        <span style="margin-top: 5px; font-size: 13px">{{ item.name }}</span>
        <div style="display: flex; justify-content: space-between">
          <span style="color: red; font-size: 15px">{{
            "￥" + item.price
          }}</span>
          <span style="font-size: 12px; color: gray">{{ item.desc }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      indexList: [],
    };
  },

  mounted() {
    this.getData();
  },

  methods: {
    Pages(path) {
      this.$router.push({
        path: path,
      });
    },
    pages(item) {
      this.$router.push({
        path: "/infodetail",
        query: {
          ...item,
        },
      });
      console.log("打印", item);
    },
    getData() {
      axios({
        url: "http://127.0.0.1:3000/index/list/remen",
        method: "get",
        params: {
          id: this.id,
        },
      }).then((res) => {
        //  console.log('首页返回信息',res)
        this.indexList = res.data;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.home-container {
  background: #fafafa;
}
.my-swipe img {
  width: 100%;
  height: 200px;
}
.grid-icon {
  font-size: 20px;
  color: rgb(255, 0, 170);
}
.img-list {
  flex-wrap: wrap;
  img {
    height: 150px;
    width: 150px;
  }
}
.content {
  display: flex;
  width: 100%;
  .content-item {
    display: flex;
    flex-direction: column;
    width: 50%;
    height: 200px;
    padding: 10px;
    box-sizing: border-box;
  }
}
</style>